// ---------------  创建剪裁区 ------------------
// - 找到剪裁区的图片 （img#image）
var image = $('#image');
// - 设置配置项
var option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
image.cropper(option);
// --------------- 2. 点击选择头像，能够实现选择图片 --------------------
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click');
})
// --------------- 3. 文件域内容改变了，能够更换剪裁区的图片 -------------
$('#file').on('change',function () {
  if (this.files.length > 0) {
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    image.cropper('replace', url);
  }
});
// --------------- 4. 点击确认修改按钮，实现更换头像 ------------------
$('button:contains("确定")').on('click', function () {
  let canvas = image.cropper('getCroppedCanvas',{width: 30, height: 30});
  let base64 = canvas.toDataURL();
  axios.post(`/my/user/avatar`, `avatar=${encodeURIComponent(base64)}`).then(res => {
    let {data: {status, message}} = res;
    if (status === 0) {
      layer.msg(message);
      // 更新index.html的头像
      window.parent.getUserinfo();
    }
  });
})